<template>
  <view class="content align-center">
    <image class="applogo" src="@/static/applogo.png"></image>
    <text class="appname">GSS顾客小程序</text>
    <view class="login-card">
      <view class="input-row flexr">
        <input
          class="input"
          placeholder="请输入手机号"
          :value="mobile"
          @change="mobileChange"
        />
      </view>
      <view class="divider" />
      <view class="input-row flexr">
        <input
          class="input"
          placeholder="请输入手机验证码"
          :value="code"
          @change="codeChange"
        />
        <view
          class="get-code flexr align-center justify-center"
          :class="{ disable: seconds > 0 }"
          @click="getCode"
        >
          {{ seconds > 0 ? `${seconds}s` : '获取验证码' }}
        </view>
      </view>
    </view>
    <view class="primary-button" @tap="login"> 登录 </view>

    <view class="login-privacy-container flexc">
      <view class="flexr align-center justify-center">
        <radio-group @change="onAgreeChange">
          <radio value="agree" :checked="agree"></radio>
        </radio-group>
        <view>
          <text>我已阅读并同意</text>
          <text class="link" @click="goPrivacy">《服务条款》</text>
          <text>和</text>
          <text class="link" @click="goPrivacy">《隐私条款》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { SendGssMsg } from '@/api/api';
import { isMobile } from '@/tools/tools';
import { useUserStore } from '@/store/user';
const userStore = useUserStore();

const agree = ref(false);
const mobile = ref('');
const code = ref('');
const seconds = ref(0);
let secondsInterval = null;

const url = ref('');
onLoad((options) => {
  url.value = options.url;
});

function onAgreeChange(e) {
  // console.log(e);
  agree.value = e.detail.value === 'agree';
}

function mobileChange(e) {
  mobile.value = e.target.value;
}
function codeChange(e) {
  code.value = e.target.value;
}

function goPrivacy() {
  uni.navigateTo({
    url: '/subpages/account/privacy',
  });
}

async function getCode() {
  if (!isMobile(mobile.value)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    });
    return;
  }
  try {
    await SendGssMsg(mobile.value);
    console.log('get code');
    seconds.value = 60;
    clearInterval(secondsInterval);
    secondsInterval = setInterval(() => {
      seconds.value = seconds.value - 1;
      if (seconds.value <= 0) {
        clearInterval(secondsInterval);
      }
    }, 1000);
  } catch (e) {
    console.error(e);
  }
}
async function login() {
  console.log('login');
  if (!isMobile(mobile.value)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    });
    return;
  }
  if (!code.value) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    });
    return;
  }
  if (!agree.value) {
    uni.showToast({
      title: '请先同意隐私服务条款',
      icon: 'none',
    });
    return;
  }

  uni.showLoading({
    title: '登录中',
  });
  const loginSuccess = await userStore.loginByMobile(mobile.value, code.value);

  if (loginSuccess) {
    uni.showToast({
      title: '登录成功',
      icon: 'success',
    });

    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];
    // console.log('prevPage', prevPage)
    let delta = 1;
    if (prevPage.route.endsWith('login')) {
      delta = 2;
    }

    if (url.value) {
      if (url.value.startsWith('/pages')) {
        uni.reLaunch({
          url: url.value,
        });
      } else {
        if (delta === 2) {
          uni.navigateBack();
          uni.redirectTo({
            url: url.value,
          });
        } else {
          uni.redirectTo({
            url: url.value,
          });
        }
      }
    } else {
      uni.navigateBack({
        delta,
      });
    }
  } else {
    uni.showToast({
      title: '登录失败',
      icon: 'error',
    });
  }
}
</script>

<style lang="scss">
.content {
  padding: 32rpx;
  .applogo {
    width: 200rpx;
    height: 200rpx;
    margin-top: 30rpx;
  }
  .appname {
    font-size: 40rpx;
    margin-top: 25rpx;
  }
  .login-card {
    background-color: white;
    border-radius: 12rpx;
    margin-top: 60rpx;
    overflow: hidden;
    align-self: stretch;
    .input-row {
      height: 90rpx;
      position: relative;
      .input {
        width: 100%;
        padding: 0 20rpx;
        height: 100%;
      }
      .get-code {
        position: absolute;
        right: 20rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 50rpx;
        width: 170rpx;
        color: $primary-color;
        border: 1px solid $primary-color;
        border-radius: 25rpx;
        font-size: 25rpx;
        z-index: 100;
        transition: opacity 0.3s;
        &.disable {
          opacity: 0.5;
          pointer-events: none;
        }
      }
    }
  }
  .primary-button {
    align-self: stretch;
    margin-top: 30rpx;
  }
  .login-privacy-container {
    padding-top: 20rpx;
    justify-content: flex-end;
    .link {
      color: $primary-color;
      padding: 10rpx 0;
    }
  }
}
</style>
